<template>
<!-- 自制 -->
    <div class="own-lists">
        <h3>自制<span class="iconfont icon-zuojiantou" @click="$router.go(-1)"></span></h3>
        <van-list v-model="loading" :finished="finished" finished-text="- End -" @load="onLoad" :error.sync="error"
            error-text="请求失败，点击重新加载">
            <div class="img-lists" v-if="own.length">
                <template v-for="ele in own">
                    <div class="img-item" v-for="item in ele" :key="item.seriesid" @click="toOwnMv(item.seriesid)">
                        <div class="img-box">
                            <img v-lazy="item.app_image" alt="">
                        </div>
                        <div class="explain">
                            <h6>{{item.title}}</h6>
                            <p class="small"><span>已跟新{{item.update_to}}集</span> <span>{{item.follower_num}}人已订阅</span></p>
                            <p class="many">{{item.content}}</p>
                        </div>
                    </div>
                </template>
            </div>
        </van-list>
    </div>
</template>

<script>
    import {
        getOwn
    } from "../api/own"
    export default {
        name:'Own',
        data() {
            return {
                own: [],
                loading: false,
                finished: false,
                error: false,
                off: 1, //页码,
            }
        },
        methods: {
            onLoad() {
                // 异步更新数据
                getOwn({
                    p: this.off,
                    size: 9,
                }).then(data => {
                    this.own.push(data.data);
                    console.log("自制", this.own);
                    // 加载状态结束
                    this.loading = false;
                    // 数据全部加载完成
                    this.off++;
                     if (data.data.length<10) {
                        this.finished = true;
                    }
                }).catch(() => {
                    this.error = true;
                    this.loading = false;
                });
            },
            toOwnMv(id){
                this.$router.push({
                    name:'OwnMv',
                    params:{
                        id:id
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.own-lists{
    padding-top: 58px;
}
    h3 {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        text-align: center;
        line-height: 58px;
        font-size: 14px;
        color: #fff;
        background-color: #000;

        span {
            position: absolute;
            left: 22px;
        }
    }

    .img-item {
        .img-box {
            width: 100%;
            height: 188px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .explain {
            height: 134px;
            box-sizing: border-box;
            padding: 16px 26px 32px 14px;
            background-color: #fff;

            h6 {
                font-size: 18px;
                margin-bottom: 8px;
            }

            .small {
                font-size: 10px;
                color: #ccc;

                span {
                    margin-right: 10px;
                }
            }

            .many {
                font-size: 14px;
                margin-top: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                line-height: 18px;
            }
        }
    }
</style>